<div class="form-inline">
  <div class="form-inline pull-left" style="font-size: 16px;">
    <span *ngIf="readonly && pushId">查看推送</span>
    <span *ngIf="pushId && !readonly">编辑推送</span>
    <span *ngIf="!pushId && !readonly">新建推送</span>
  </div>
</div>

<div style="display: block;clear: both;">
  <form nz-form [formGroup]="validateForm">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>活动名称：</div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('title')">
        <div class="p-pr" style="width:300px;">
            					            	<textarea
                                      formControlName="title"
                                      placeholder="请输入活动名称"
                                      class="ant-input ng-pristine ng-valid ng-touched"
                                      rows="2"
                                      [disabled]="readonly"
                                      [ngClass]="{'ant-input-disabled':readonly}"
                                      style="width:300px;" maxlength="30"></textarea>
          <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
            {{30-(validateForm.controls.title.value?validateForm.controls.title.value.length:0) }}
          </div>
        </div>
        <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('required')">
          请输入活动名称
        </div>
        <!--<div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('maxlength')">-->
        <!--活动名称不能超过30个字-->
        <!--</div>-->
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>推送时间：</div>
      <div nz-form-control nz-col [nzSm]="10" [nzXs]="16" [nzValidateStatus]="getFormControl('send_time')">
        <nz-datepicker style="width:300px;" nzShowTime
                       (ngModelChange)="send_time=$event;_startValueChange()"
                       formControlName="send_time"
                       [nzDisabledDate]="_disabledStartDate"
                       [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                       [nzDisabled]="readonly"
                       [nzShowTime]="true"
                       [nzAllowClear]="false"
                       [nzPlaceHolder]="'推送时间'"></nz-datepicker>
        <div nz-form-explain
             *ngIf="getFormControl('send_time').dirty&&getFormControl('send_time').hasError('required')">请选择推送时间
        </div>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>活动类型：</div>
      <nz-select
        style="width: 110px;"
        [nzSize]="'large'"
        [nzPlaceHolder]="'请选择活动类型'"
        [(ngModel)]="active_type"
        [ngModelOptions]="{standalone: true}"
        [nzDisabled]="true"
      >
        <nz-option
          *ngFor="let type of activity_type"
          [nzLabel]="type.label"
          [nzValue]="type.value">
        </nz-option>
      </nz-select>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>模板类型：</div>
      <nz-select
        style="width: 130px;"
        [nzSize]="'large'"
        [nzPlaceHolder]="'请选择模板类型'"
        [(ngModel)]="active_template_id"
        [ngModelOptions]="{standalone: true}"
        [nzDisabled]="readonly"
        (ngModelChange)="selectTemplate($event)"
      >
        <nz-option
          *ngFor="let template of template_list"
          [nzLabel]="template.title"
          [nzValue]="template.template_id">
        </nz-option>
      </nz-select>
    </div>
    <ng-container *ngIf="keyWordList && validateForm.controls['keyword1']">
      <div nz-row style="margin-bottom:24px;">
        <div nz-col [nzSpan]="13" [nzOffset]="'6'">
          <nz-card style="width:100%;">
            <ng-template #title>
              {{ active_template_name }}
            </ng-template>
            <ng-template #body>
              <div nz-form-item nz-row *ngFor="let k of keyWordList;let i = index;">
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>{{ keyWordList[i] }}：</div>
                <div nz-form-control nz-col [nzSm]="10" [nzXs]="16" [nzValidateStatus]="getFormControl('keyword' + (i+1) )">
                  <div style="position:relative;">
                    <nz-input  [formControl]="validateForm.controls['keyword' + (i+1)]" [nzPlaceHolder]="'请输入'+ keyWordList[i]"
                               [nzDisabled]="readonly"
                               [nzSize]="'large'"></nz-input>
                    <span style="position: absolute;left:105%;white-space: nowrap;color:#ccc;top:50%;transform: translateY(-50%);">{{ exampleList[i] }}</span>
                  </div>
                  <div nz-form-explain style="clear:both;text-align: left;"
                       *ngIf="getFormControl( 'keyword' + (i+1) ).dirty&&getFormControl('keyword' + (i+1)).hasError('required')">
                    请输入{{ keyWordList[i] }}
                  </div>
                </div>
              </div>
            </ng-template>
          </nz-card>
        </div>
      </div>
    </ng-container>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>备注：</div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('remark')">
        <div class="p-pr" style="width:300px;">
            					            	<textarea
                                      formControlName="remark"
                                      placeholder="请输入备注"
                                      class="ant-input ng-pristine ng-valid ng-touched"
                                      rows="2"
                                      [disabled]="readonly"
                                      [ngClass]="{'ant-input-disabled':readonly}"
                                      style="width:300px;" maxlength="30"></textarea>
          <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
            {{30-(validateForm.controls.remark.value?validateForm.controls.remark.value.length:0) }}
          </div>
        </div>
        <div nz-form-explain *ngIf="getFormControl('remark').dirty&&getFormControl('remark').hasError('required')">
          请输入备注
        </div>
      </div>
    </div>
    <!--<div nz-form-item nz-row>-->
      <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>跳转页面：</div>-->
      <!--<div nz-form-control nz-col [nzSm]="5" [nzXs]="16" [nzValidateStatus]="getFormControl('page')">-->
        <!--<nz-input formControlName="page" [nzPlaceHolder]="'请输入跳转页面'" [nzDisabled]="readonly"-->
                  <!--[nzSize]="'large'"></nz-input>-->
        <!--<div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">-->
          <!--请输入跳转页面-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <ng-container *ngIf="pushId && !readonly">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>取消推送：</div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
          <label nz-checkbox [(ngModel)]="status" [ngModelOptions]="{standalone: true}"></label>
        </div>
      </div>
    </ng-container>

    <div nz-form-item nz-row style="margin-bottom:8px;" *ngIf="!readonly">
      <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6" *ngIf="!pushId">
        <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="addStatus" (click)="_submitForm()">{{
          addStatus ? '提交中': '提 交' }}
        </button>
        <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()"
                style="margin-left: 20px">取 消
        </button>
      </div>
      <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6" *ngIf="pushId">
        <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="addStatus" (click)="_submitForm()">{{
          addStatus ? '修改中': '修 改' }}
        </button>
        <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()"
                style="margin-left: 20px">取 消
        </button>
      </div>
    </div>

    <div nz-form-item nz-row style="margin-bottom:8px;" *ngIf="readonly">
      <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
        <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()">返 回</button>
      </div>
    </div>
  </form>
</div>
